<template>
  <view class="article_wrap">
    <u-navbar :is-back="false" :background="background">
      <view class="article_slot" @click="handleTopBack">
        &lt; {{ articleData[id].articleTitle }}
      </view>
    </u-navbar>

    <view class="article_main">
      <towxml :nodes="article" v-if="xmlShow" />
      <u-loadmore :status="status" />
    </view>
  </view>
</template>

<script>
import towxml from '../../static/towxml/towxml'
export default {
  name: 'article',
  data() {
    return {
      catId: '',
      articleData: [],
      background: {
        backgroundColor: '#FA7498',
      },
      article: {},
      status: 'loading',
      xmlShow: true,
      id: 0,
    }
  },
  onLoad(option) {
    this.catId = option.catId
    this.id = option.id
    this.getArticleData(this.catId, this.id)
  },
  methods: {
    async getArticleData(catId, id) {
      let result
      try {
        result = await this.request({
          url: `/exercise/artcle/getArtcleList?catId=${catId}`,
        })
      } catch (error) {
        console.log(error.message)
      }
      this.articleData = result.data //当前章节内容

      this.getCurrentArticle(id) //章节 第几节内容 ---> id
    },
    getCurrentArticle(id) {
      wx.request({
        url: this.articleData[id].articleUrl,
        success: (result) => {
          console.log('陈功了1');
          this.article = this.towxml(result.data, 'markdown', {}) //固定格式
          this.status = 'nomore'
        },
        fail:(err=>{
          console.log(err.message);
        })
      })
    },
    handleTopBack() {
      uni.navigateBack()
    },
  },
  components: { towxml },
}
</script>

<style lang="scss">
.article_wrap {
  .article_slot {
    display: flex;
    color: #fff;
    padding-left: 35rpx;
    font-size: 31rpx;
    letter-spacing: 4rpx;
  }
  .article_main {
    padding-bottom: 80rpx;
  }
}
</style>